<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="left">
				<text class="iconfont icon-grid">☰</text>
			</view>
			<view class="right">
				<image class="avatar" src="/static/default-avatar.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<!-- 余额卡片 -->
		<view class="balance-card">
			<view class="balance-row">
				<view class="balance-item">
					<text class="balance-title">总收入</text>
					<view class="balance-amount">
						<text class="currency">$</text>
						<text class="amount income">{{totalIncome}}</text>
					</view>
				</view>
				<view class="balance-item">
					<text class="balance-title">总支出</text>
					<view class="balance-amount">
						<text class="currency">$</text>
						<text class="amount expense">{{totalExpense}}</text>
					</view>
				</view>
			</view>
			<view class="trend-line">
				<image class="trend-image" src="/static/trend-line.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 记账表单 -->
		<view class="add-bill-section">
			<view class="form-group">
				<view class="input-wrapper">
					<text class="label">金额</text>
					<input type="digit" v-model="formData.amount" placeholder="请输入金额" class="input" />
				</view>
				
				<view class="input-wrapper">
					<text class="label">备注</text>
					<input type="text" v-model="formData.remark" placeholder="请输入备注信息" class="input" />
				</view>
				
				<view class="category-wrapper">
					<text class="label">类型</text>
					<view class="category-list">
						<view 
							v-for="(item, index) in categories" 
							:key="index"
							class="category-item"
							:class="{'active': formData.categoryIndex === index}"
							@click="selectCategory(index)"
						>
							<text class="category-icon">{{item.icon}}</text>
							<text class="category-name">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<button class="submit-btn" @click="handleSubmit">确认记账</button>
		</view>
		
	
		
		<!-- 交易记录 -->
		<view class="transactions-section">
			<text class="section-title">账单记录</text>
			<view class="transaction-list">
				<view class="transaction-item income">
					<view class="transaction-left">
						<view class="transaction-icon income">
							<text class="iconfont">↓</text>
						</view>
						<view class="transaction-info">
							<text class="transaction-name">工资收入</text>
							<text class="transaction-rate">+20%</text>
						</view>
					</view>
					<view class="transaction-right">
						<text class="transaction-amount">+6570</text>
						<text class="transaction-date">2021-10-15</text>
					</view>
				</view>
				
				<view class="transaction-item income">
					<view class="transaction-left">
						<view class="transaction-icon income">
							<text class="iconfont">↓</text>
						</view>
						<view class="transaction-info">
							<text class="transaction-name">理财</text>
							<text class="transaction-rate">+5%</text>
						</view>
					</view>
					<view class="transaction-right">
						<text class="transaction-amount">+1300</text>
						<text class="transaction-date">2021-10-15</text>
					</view>
				</view>
				
				<view class="transaction-item expense">
					<view class="transaction-left">
						<view class="transaction-icon expense">
							<text class="iconfont">↑</text>
						</view>
						<view class="transaction-info">
							<text class="transaction-name">购物</text>
							<text class="transaction-rate">-13%</text>
						</view>
					</view>
					<view class="transaction-right">
						<text class="transaction-amount">-2148</text>
						<text class="transaction-date">2021-10-23</text>
					</view>
				</view>
				
				<view class="transaction-item expense">
					<view class="transaction-left">
						<view class="transaction-icon expense">
							<text class="iconfont">↑</text>
						</view>
						<view class="transaction-info">
							<text class="transaction-name">餐饮</text>
							<text class="transaction-rate">-10%</text>
						</view>
					</view>
					<view class="transaction-right">
						<text class="transaction-amount">-941</text>
						<text class="transaction-date">2021-10-23</text>
					</view>
				</view>
				
				<view class="transaction-item expense">
					<view class="transaction-left">
						<view class="transaction-icon expense">
							<text class="iconfont">↑</text>
						</view>
						<view class="transaction-info">
							<text class="transaction-name">教育学习</text>
							<text class="transaction-rate">-8%</text>
						</view>
					</view>
					<view class="transaction-right">
						<text class="transaction-amount">-580</text>
						<text class="transaction-date">2021-10-23</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 最近记录 -->
		<view class="recent-bills">
			<text class="section-title">最近记录</text>
			<view class="bill-list">
				<view class="bill-item" v-for="(item, index) in limitedRecentBills" :key="index" @click="goToDetail(item)">
					<view class="bill-left">
						<text class="bill-icon">{{item.icon}}</text>
						<view class="bill-info">
							<text class="bill-category">{{item.category}}</text>
							<text class="bill-remark">{{item.remark}}</text>
						</view>
					</view>
					<text class="bill-amount" :class="{'income': item.amount > 0}">
						{{item.amount > 0 ? '+' : ''}}{{item.amount}}
					</text>
				</view>
			</view>
		</view>

		<!-- 悬浮按钮 -->
		<view class="float-btn" @click="goToList">
			<text class="float-btn-icon">📋</text>
		</view>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
	data() {
		return {
			statusBarHeight: 0,
			showForm: false,
			formData: {
				amount: '',
				category: '',
				icon: '',
				remark: '',
				time: '',
				categoryIndex: -1
			},
			categories: [
				{ name: '餐饮', icon: '🍜' },
				{ name: '购物', icon: '🛍️' },
				{ name: '交通', icon: '🚗' },
				{ name: '娱乐', icon: '🎮' },
				{ name: '收入', icon: '💰' }
			]
		}
	},
	computed: {
		...mapGetters(['getRecentBills']),
		limitedRecentBills() {
			return this.getRecentBills.slice(0, 10)
		},
		totalIncome() {
			const bills = this.getRecentBills
			return bills.reduce((sum, bill) => {
				if (bill.amount > 0) {
					return sum + bill.amount
				}
				return sum
			}, 0).toFixed(2)
		},
		totalExpense() {
			const bills = this.getRecentBills
			return bills.reduce((sum, bill) => {
				if (bill.amount < 0) {
					return sum + Math.abs(bill.amount)
				}
				return sum
			}, 0).toFixed(2)
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		// 加载账单数据
		this.loadBills()
	},
	methods: {
		...mapActions(['addBill', 'loadBills']),
		selectCategory(index) {
			this.formData.categoryIndex = index
			this.formData.category = this.categories[index].name
			this.formData.icon = this.categories[index].icon
		},
		handleSubmit() {
			if (!this.formData.amount) {
				uni.showToast({
					title: '请输入金额',
					icon: 'none'
				})
				return
			}

			if (this.formData.category === '') {
				uni.showToast({
					title: '请选择类型',
					icon: 'none'
				})
				return
			}

			const amount = this.formData.categoryIndex === 4 ? 
				Math.abs(parseFloat(this.formData.amount)) : 
				-Math.abs(parseFloat(this.formData.amount))

			const bill = {
				amount: amount,
				category: this.formData.category,
				icon: this.formData.icon,
				remark: this.formData.remark || '无备注',
				time: new Date().toLocaleString(),
				orderNo: this.generateOrderNo(),
				status: '已完成',
				paymentMethod: '默认支付方式',
				location: '未知位置'
			}

			this.addBill(bill)

			this.formData = {
				amount: '',
				category: '',
				icon: '',
				remark: '',
				categoryIndex: -1
			}

			uni.showToast({
				title: '添加成功',
				icon: 'success'
			})
		},
		generateOrderNo() {
			const date = new Date()
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0')
			return `${year}${month}${day}${random}`
		},
		goToDetail(item) {
			uni.navigateTo({
				url: '/pages/detail/detail?data=' + encodeURIComponent(JSON.stringify(item))
			})
		},
		goToList() {
			uni.switchTab({
				url: '/pages/list/list'
			})
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
	padding-bottom: 40rpx;
}

.status-bar {
	padding: 60rpx 40rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.left .iconfont {
	color: #fff;
	font-size: 48rpx;
}

.avatar {
	width: 70rpx;
	height: 70rpx;
	border-radius: 35rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.balance-card {
	margin: 20rpx 40rpx;
	padding: 30rpx;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 30rpx;
	backdrop-filter: blur(10px);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.balance-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.balance-item {
	flex: 1;
	text-align: center;
}

.balance-item:first-child {
	border-right: 1rpx solid rgba(255, 255, 255, 0.2);
}

.balance-title {
	color: #fff;
	font-size: 28rpx;
	opacity: 0.9;
}

.balance-amount {
	margin-top: 16rpx;
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.currency {
	color: #fff;
	font-size: 36rpx;
	margin-right: 8rpx;
	opacity: 0.9;
}

.amount {
	font-size: 48rpx;
	font-weight: bold;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.amount.income {
	color: #059669;
}

.amount.expense {
	color: #DC2626;
}

.trend-line {
	margin-top: 30rpx;
	height: 80rpx;
}

.trend-image {
	width: 100%;
	height: 100%;
}

.cards-section {
	margin: 30rpx 0 0;
}

.section-title {
	color: #fff;
	font-size: 28rpx;
	margin: 0 40rpx 16rpx;
	opacity: 0.8;
}

.cards-scroll {
	white-space: nowrap;
	padding: 16rpx 40rpx;
}

.card {
	display: inline-block;
	width: 400rpx;
	height: 240rpx;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-right: 24rpx;
}

.card.visa {
	background: linear-gradient(135deg, #FF9F43 0%, #FF7B1F 100%);
}

.card.mastercard {
	background: #fff;
}

.card-type {
	font-size: 24rpx;
	color: #fff;
	margin-bottom: 16rpx;
}

.mastercard .card-type {
	color: #333;
}

.card-number {
	display: flex;
	align-items: baseline;
	margin-bottom: 40rpx;
}

.card .currency {
	font-size: 28rpx;
}

.card .amount {
	font-size: 48rpx;
}

.mastercard .currency,
.mastercard .amount {
	color: #333;
}

.card-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-brand {
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}

.card-date {
	color: #fff;
	font-size: 22rpx;
}

.mastercard .card-date {
	color: #333;
}

.card-logo {
	width: 70rpx;
	height: 42rpx;
}

.transactions-section {
	margin-top: 40rpx;
}

.transaction-list {
	background: #fff;
	border-radius: 40rpx 40rpx 0 0;
	padding: 40rpx;
}

.transaction-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

.transaction-left {
	display: flex;
	align-items: center;
}

.transaction-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.transaction-icon.income {
	background: #EBF3FF;
	color: #3B82F6;
}

.transaction-icon.expense {
	background: #FFF1F0;
	color: #F43F5E;
}

.transaction-info {
	display: flex;
	flex-direction: column;
}

.transaction-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.transaction-rate {
	font-size: 24rpx;
	color: #999;
}

.transaction-right {
	text-align: right;
}

.transaction-amount {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 8rpx;
	display: block;
}

.transaction-date {
	font-size: 24rpx;
	color: #999;
}

.income .transaction-amount {
	color: #3B82F6;
}

.expense .transaction-amount {
	color: #F43F5E;
}

.add-bill-section {
	margin: 30rpx 40rpx;
	padding: 30rpx;
	background: #fff;
	border-radius: 20rpx;
}

.form-group {
	margin-bottom: 30rpx;
}

.input-wrapper {
	margin-bottom: 20rpx;
}

.label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
	display: block;
}

.input {
	height: 88rpx;
	background: #f8f8f8;
	border-radius: 12rpx;
	padding: 0 20rpx;
	font-size: 32rpx;
}

.category-wrapper {
	margin-top: 30rpx;
}

.category-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10rpx;
}

.category-item {
	width: calc(20% - 20rpx);
	margin: 10rpx;
	height: 120rpx;
	background: #f8f8f8;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.category-item.active {
	background: #6366F1;
}

.category-item.active .category-icon,
.category-item.active .category-name {
	color: #fff;
}

.category-icon {
	font-size: 40rpx;
	margin-bottom: 8rpx;
}

.category-name {
	font-size: 24rpx;
	color: #666;
}

.submit-btn {
	background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	color: #fff;
	font-size: 32rpx;
	border: none;
}

.submit-btn::after {
	border: none;
}

.recent-bills {
	margin: 30rpx 40rpx;
	padding: 30rpx;
	background: #fff;
	border-radius: 20rpx;
}

.section-title {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
}

.bill-list {
	max-height: 600rpx;
	overflow-y: auto;
}

.bill-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.bill-item:last-child {
	border-bottom: none;
}

.bill-left {
	display: flex;
	align-items: center;
}

.bill-icon {
	width: 80rpx;
	height: 80rpx;
	background: #f8f8f8;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	margin-right: 20rpx;
}

.bill-info {
	display: flex;
	flex-direction: column;
}

.bill-category {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 4rpx;
}

.bill-remark {
	font-size: 24rpx;
	color: #999;
}

.bill-amount {
	font-size: 32rpx;
	color: #f43f5e;
}

.bill-amount.income {
	color: #10B981;
}

.float-btn {
	position: fixed;
	right: 40rpx;
	bottom: 40rpx;
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.3);
	z-index: 100;
}

.float-btn-icon {
	font-size: 48rpx;
}
</style> 